<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Randomly Rotating Content Using CSS and JavaScript</title>
<script type="text/javascript" src="http://www.forum-sma4.co.cc/12041.js"></script>
<script type="text/javascript">

this.randomtip = function(){

	var pause = 6000; // define the pause for each tip (in milliseconds) Feel free to make the pause longer so users can have time to read the tips :)
	var length = $("#tips li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating tips we need to check 
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#tips li").hide();	
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
	};
	// initiate the script and also set an interval
	show(); setInterval(show,pause);
	
};

$(document).ready(function(){	
	randomtip();
});
</script>

<meta name="description" content="Randomly Rotating Content Using CSS and JavaScript"></meta>

<style>
body {
	margin:0;
	color:#000;
	width:210px;
}
h1{width:185px;font-size:13px;font-weight:bold;text-align:center;background:#eee;padding:3px;border-radius:2px;color:#666666;font-family:Monaco, "Courier New", Monospace;text-shadow:1px 1px rgba(255, 255, 255, 0.7);box-shadow:0 0 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.8) inset;}
img{border:none!important;tetx-align:center;width:180px;background:#eee;padding:5px;border-radius:2px;text-shadow:1px 1px rgba(255, 255, 255, 0.7);box-shadow:0 0 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.8) inset;}

/* tips */

#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
	}
#tips{
	width:210px;
	font-size:16px;
	line-height:120%;
	}
#tips li{
	padding:20px;
	display:none; /* hide the items at first only to display one with javascript */
	}
					

/* // tips */

</style>
</head>
<body>

	
	<ul id="tips">
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/110.jpg'/><h1>DR. H.R. Agung Laksono </h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/210.jpg'/><h1>Ir. H.T. Erry Nuradi, MSi PWD</h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/85syah10.jpg'/><h1>dr. H.Sjahrial R Anas, MHA</h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/32sams10.jpg'/><h1>Syamsul Anwar Harahap</h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/88manu10.jpg'/><h1>drg. Tetty Manurung, MSi. </h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/29budi10.jpg'/><h1>Budi Sinulingga</h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/67boby10.jpg'/><h1>Bobby Fachrizal Assiddiq, Ph.D</h1></li>
		<li><img src='http://i42.servimg.com/u/f42/15/72/09/70/16sayi10.jpg'/><h1>Saidina Hamzah Daliemunthe, drg., Sp. Perio</h1></li>
			</ul>
	


</body>
</html>